<template>
	<view>
		<view class="user-card">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar"></image>
				<view class="info">
					<view class="name">{{ userInfo.nickname }}</view>
					<view class="num" v-if="userInfo.phone">
						<view class="num-txt">{{ userInfo.phone }}</view>
					</view>
				</view>
				<navigator url="/pages/activity/invite/index" hover-class="none">
					<view class="sign">立即邀请</view>
				</navigator>
			</view>
			<view class="num-wrapper">
				<view class="num-item">
					<text class="num">{{ userInfo.inviteNum || 0 }}</text>
					<view class="txt">邀请成功人数</view>
				</view>
				<view class="num-item">
					<text
						class="num">{{ userInfo.brokeragePrice ? Number(userInfo.brokeragePrice).toFixed(2) : 0 }}</text>
					<view class="txt">邀请奖励</view>
				</view>
				<view class="num-item">
					<text class="num">{{ userInfo.repeatReward ? Number(userInfo.repeatReward).toFixed(2) : 0 }}</text>
					<view class="txt">复购奖励</view>
				</view>
			</view>
		</view>
		<view class="month-buy-flag" v-if="!userInfo.monthBuyFlag">本月您还未复购12包，将无法获得复购奖励。</view>
		<view class="list acea-row row-between-wrapper">
			<navigator url="/pages/users/user_spread_money/index?type=1" hover-class="none"
				class="item acea-row row-center-wrapper row-column">
				<text class="iconfont icon-tongji"></text>
				<view>邀请奖励明细</view>
			</navigator>
			<navigator url="/pages/users/user_spread_money/index?type=2" hover-class="none"
				class="item acea-row row-center-wrapper row-column">
				<text class="iconfont icon-qiandai"></text>
				<text>复购奖励明细</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getUserInfo,
		getSpreadInfo
	} from '@/api/user.js';

	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				userInfo: {},
				spreadInfo: {}
			};
		},
		onLoad() {
			if (this.isLogin) {
				this.getUserInfo();
				this.getSpreadInfo();
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: '发现一家好店铺，分享给你～',
				path: '/pages/index/index?spid=' + this.$store.getters.uid || '',
				imageUrl: "http://image.tocj1314.com/0746056800564c178edcc3c9bfdf0be2.png"
			};
		},
		methods: {
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			/**
			 * 获取个人用户信息
			 */
			getSpreadInfo: function() {
				let that = this;
				getSpreadInfo().then(res => {
					that.$set(that, 'spreadInfo', res.data);
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.user-card {
		width: 710rpx;
		height: 340rpx;
		margin: 30rpx auto;
		padding: 35rpx 28rpx;
		background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
		box-shadow: 0px 10rpx 20rpx 0px rgba(255, 2, 0, 0.2);
		border-radius: 24rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-image: url('~@/static/images/user_bg.png');
			background-size: 100% 100%;
		}

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				padding: 15rpx 0;

				.name {
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 31rpx;

					.vip {
						display: flex;
						align-items: center;
						padding: 6rpx 20rpx;
						background: rgba(0, 0, 0, 0.2);
						border-radius: 18px;
						font-size: 20rpx;
						margin-left: 12rpx;
						// margin-top: 2rpx;

						image {
							width: 27rpx;
							height: 27rpx;
						}
					}
				}

				.num {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.6);

					image {
						width: 22rpx;
						height: 23rpx;
						margin-left: 20rpx;
					}
				}
			}

			.sign {
				padding: 10rpx;
				border-radius: 28rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #282828;
				background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
			}
		}

		.num-wrapper {
			z-index: 30;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 60rpx;
			color: #fff;

			.num-item {
				width: 33.33%;
				text-align: center;

				.num {
					font-size: 42rpx;
					font-weight: bold;
				}

				.txt {
					margin-top: 8rpx;
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.6);
				}
			}
		}
	}

	.month-buy-flag {
		padding: 10rpx 30rpx;
		color: #ff5454;
		background-color: #ffff92;
	}

	.list {
		padding: 0 20rpx 50rpx 20rpx;
		margin-top: 10rpx;
	}

	.list .item {
		width: 345rpx;
		height: 240rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #666;
	}

	.list .item .iconfont {
		font-size: 70rpx;
		background-image: linear-gradient(to right, #fc4d3d 0%, #e93323 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 20rpx;
	}
</style>
